import React, { Component } from 'react'
import {View, Text,Image,TouchableOpacity,ImageBackground} from 'react-native'
import {request} from '../../network/request'
import {inject, observer} from 'mobx-react'
@inject('RootStore')
@observer
export default class Friends extends Component {
  constructor(props) {
    super(props)
    this.state ={
      xinxi:{},
      isShow:true
    }
  }
  componentDidMount(){
    request({
      headers:{
        'token':this.props.RootStore.token
      },
      url:'/home/profile'
    }).then(res => {
      this.setState({
        xinxi:res.data,
        isShow:true
      })
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    console.log(this.props)
  }
  render() {
    console.log(this.props)
    let {xinxi ,isShow} = this.state;
    if(!isShow) {
      return<View></View>
    }else{
      return(
        <View>
        <View style={{height:150}}>
          <ImageBackground source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605361172531&di=5bebb5d602e1b34e053ffece90820800&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F87%2F44%2F825c8b408005f20.jpg'}}
            style={{height:150 ,resizeMode: "cover"}}
          ></ImageBackground>
          {/* title */}
          <View style={{flex:1,justifyContent:'flex-start',alignItems:'center',flexDirection:'row',position:'absolute',left:10,bottom:20}}>
            <Image source={{uri:xinxi.img}}
              style={{height:70,width:70,borderRadius:50}}
            ></Image>
            <View style={{height:70,width:200}}>
              <View style={{flex:1,flexDirection:'row',justifyContent:'flex-start',paddingLeft:10}}>
                <Text style={{fontSize:17,color:'blue'}}>{xinxi.name}</Text>
                <Image source={require('../../assets/img/nansheng.png')}
                  style={{height:20,width:20,marginLeft:10}}
                ></Image>
                <Text style={{fontSize:17,marginLeft:10}}>{xinxi.age}</Text>
              </View>
              <View style={{flex:1,flexDirection:'row',justifyContent:'flex-start',paddingLeft:10}}>
                <Image source={require('../../assets/img/dingwei.png')}
                  style={{height:20,width:20}}
                ></Image>
                <Text style={{fontSize:17,marginLeft:10,color:'red'}}>{xinxi.location}</Text>
              </View>
            </View>
           
          </View>
           {/* 设置  */}
          <TouchableOpacity style={{height:50,width:50,position:'absolute',right:5,top:20}}>
            <Image source={require('../../assets/img/bianji.png')}></Image>
          </TouchableOpacity>
        </View>
        {/* center */}
        <View style={{height:80,backgroundColor:'white'}}>
          <View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center',padding:20}}>
            <TouchableOpacity style={{height:60 ,flex:1,justifyContent:'center',alignItems:'center'}}>
              <Text style={{textAlign:'center'}}>0</Text>
              <Text>相互关注</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{height:60,flex:1,justifyContent:'center',alignItems:'center'}}>
              <Text style={{textAlign:'center'}}>{0}</Text>
              <Text>喜欢</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{height:60,flex:1,justifyContent:'center',alignItems:'center'}}>
              <Text style={{textAlign:'center'}}>{2}</Text>
              <Text>粉丝</Text>
            </TouchableOpacity>
          </View>
        </View>
        {/* bottom */}
        <View style={{height:300,backgroundColor:'white',marginTop:10}}>
          <TouchableOpacity style={{flex:1,flexDirection:'row',justifyContent:'flex-start',alignItems:'center',borderBottomWidth:1,borderBottomColor:'lightgrey'}}>
            <Image source={require('../../assets/img/wujiaoxing-.png')}
            style={{marginLeft:10}}
            ></Image>
            <Text style={{marginLeft:10}}>我的动态</Text>
          </TouchableOpacity>
          <TouchableOpacity style={{flex:1,flexDirection:'row',justifyContent:'flex-start',alignItems:'center',borderBottomWidth:1,borderBottomColor:'lightgrey'}}>
            <Image source={require('../../assets/img/kanjian.png')}
            style={{marginLeft:10}}
            ></Image>
            <Text style={{marginLeft:10}}>谁看过我</Text>
          </TouchableOpacity>
          <TouchableOpacity style={{flex:1,flexDirection:'row',justifyContent:'flex-start',alignItems:'center',borderBottomWidth:1,borderBottomColor:'lightgrey'}}>
            <Image source={require('../../assets/img/shezhi.png')}
              style={{marginLeft:10}}
            ></Image>
            <Text style={{marginLeft:10}}>通用设置</Text>
          </TouchableOpacity>
          <TouchableOpacity style={{flex:1,flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}}>
            <Image source={require('../../assets/img/kefu.png')} 
              style={{marginLeft:10}}
            ></Image>
            <Text style={{marginLeft:10}}>客服在线</Text>
          </TouchableOpacity>
        </View>
      </View>
      )
    }
  }
}
